<!DOCTYPE html>
<html>

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="viewport" content="width=device-width">

  <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicon-16x16.png">
  <link rel="mask-icon" href="assets/images/safari-pinned-tab.svg" color="#5bbad5">
  <meta name="msapplication-TileColor" content="#da532c">
  <meta name="theme-color" content="#ffffff">

  <link href="https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i,900,900i" rel="stylesheet">
  <link href="assets/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  <link href="assets/vendor/themify-icons/css/themify-icons.css" rel="stylesheet">
  <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

  <link rel="stylesheet" type="text/css" href="assets/css/style.css">

  <title>SingPass Mobile (TEST) Home Screen</title>
</head>

<body style="background-color:#F5F5F5;">

  <!-- home screen start -->
  <div id="spm-header-home">
    <div class="container">
      <strong>SingPass Mobile (TEST)</strong>
      <a href="spm-phone.html" class="settings-icon"><span class="ti-settings"></span></a>
    </div>
  </div>

  <div id="main-home" class="container">
    <div class="row">
      <img src="assets/images/home-card-blue.png" class="mt-2 home-card-img">
      <span class="hello-text">HELLO,</span>
      <span class="hello-name" id="name"></span>
    </div>

    <div class="row mt-2">
      <div class="col-sm-12">
        <div class="card card-shadow">
          <div class="card-body">
            <p>This is for testing of the QR Identity flow.</p>
            <hr>
            <p>To begin, click on the scan icon at the bottom of the screen to simulate the scanning of QR code on the left.</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div id="footer-icons">
    <a href="spm-qr-scan.html">
      <img src="assets/images/qr-icon.png">
      <span>SCAN</span>
    </a>
  </div>
  <!-- home screen end -->

  <script src='assets/js/custom.js'></script>
  <script type="text/javascript" src="assets/vendor/jquery-3.4.1.min.js"></script>
  <script type="text/javascript" src="assets/vendor/jquery-ui/js/jquery-ui.min.js"></script>
  <script type="text/javascript" src="assets/vendor/jquery-ui-sliderbutton/js/jquery.ui.sliderbutton.js"></script>
  <script src="assets/vendor/bootstrap/js/bootstrap.min.js"></script>
  <script>
    $.ajax({
        url: "/getCurrentProfile",
        type: "GET",
        success: function(data) {
          populate(data);
        },
        dataType: "json",
        timeout: 5000
    });

    function populate(data){
      document.getElementById('name').innerHTML = data.name ? data.name.value : "";
    }
  </script>
</body>

</html>
